<template>
  <div class="box" ref="targetElement">
    <div class="search-box" ref="searchBox">
      <div class="search-top-box">
        <div class="search-top-left-box">
          <el-form label-width="110px" ref="div" :inline="true" :model="formSearch" @submit.native.prevent
            class="demo-form-inline">
            <!-- 产品大类 -->
            <template v-if="activeName == 3">
              <el-form-item label="产品大类">
                <el-input @change="onSearch(1)" clearable class="form-width" v-model="formSearch.type_name"
                  placeholder="输入产品大类"></el-input>
              </el-form-item>
              <el-form-item label="创建时间">
                <el-date-picker value-format="yyyy-MM-dd" @change="onSearch(1)" clearable class="form-width"
                  v-model="formSearch.dateVal" type="daterange" range-separator="至" start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="创建人">
                <el-select filterable @change="onSearch(1)" class="form-width" clearable v-model="formSearch.user_id"
                  placeholder="选择创建人">
                  <el-option v-for="item in adminOptions" :key="item.id" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="上架/下架">
                <el-select filterable @change="onSearch(1)" class="form-width" clearable v-model="formSearch.state"
                  placeholder="选择上架状态">
                  <el-option label="上架" :value="1">
                  </el-option>
                  <el-option label="下架" :value="2">
                  </el-option>
                </el-select>
              </el-form-item>
            </template>
            <!-- 产品名称 -->
            <template v-if="activeName == 2">
              <el-form-item label="产品大类">
                <el-select filterable @change="onSearch(1)" class="form-width" clearable
                  v-model="formSearch.product_type_id" placeholder="选择产品大类">
                  <el-option v-for="item in productTypeList" :key="item.Id" :label="item.product_type_name"
                    :value="item.Id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="产品名称">
                <el-input @change="onSearch(1)" clearable class="form-width" v-model="formSearch.product_name"
                  placeholder="输入产品名称"></el-input>
              </el-form-item>
              <el-form-item label="创建时间">
                <el-date-picker value-format="yyyy-MM-dd" @change="onSearch(1)" clearable class="form-width"
                  v-model="formSearch.dateVal" type="daterange" range-separator="至" start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="创建人">
                <el-select filterable @change="onSearch(1)" class="form-width" clearable v-model="formSearch.user_id"
                  placeholder="选择创建人">
                  <el-option v-for="item in adminOptions" :key="item.id" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <template v-if="moreSearchShow">
                <el-form-item label="上架/下架">
                  <el-select filterable @change="onSearch(1)" class="form-width" clearable v-model="formSearch.state"
                    placeholder="选择上架状态">
                    <el-option label="上架" :value="1">
                    </el-option>
                    <el-option label="下架" :value="2">
                    </el-option>
                  </el-select>
                </el-form-item>
              </template>
            </template>
            <!-- 产品规格 -->
            <template v-if="activeName == 1">
              <el-form-item label="产品大类">
                <el-select filterable @change="onSearch(1)" class="form-width" clearable
                  v-model="formSearch.product_type_id" placeholder="选择产品大类">
                  <el-option v-for="item in productTypeList" :key="item.Id" :label="item.product_type_name"
                    :value="item.Id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="产品名称">
                <el-input @change="onSearch(1)" clearable class="form-width" v-model="formSearch.product_name"
                  placeholder="输入产品名称"></el-input>
              </el-form-item>
              <el-form-item label="产品规格">
                <el-input @change="onSearch(1)" clearable class="form-width" v-model="formSearch.product_specs_name"
                  placeholder="输入产品规格"></el-input>
              </el-form-item>
              <el-form-item label="产品参数">
                <el-input @change="onSearch(1)" clearable class="form-width" v-model="formSearch.product_describe"
                  placeholder="输入产品参数"></el-input>
              </el-form-item>
              <template v-if="moreSearchShow">
                <el-form-item label="创建时间">
                  <el-date-picker value-format="yyyy-MM-dd" @change="onSearch(1)" clearable class="form-width"
                    v-model="formSearch.dateVal2" type="daterange" range-separator="至" start-placeholder="开始日期"
                    end-placeholder="结束日期">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="创建人">
                  <el-select filterable @change="onSearch(1)" class="form-width" clearable v-model="formSearch.user_id"
                    placeholder="选择创建人">
                    <el-option v-for="item in adminOptions" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="上架/下架">
                  <el-select filterable :filter-method="filterMethodFunc" @change="onSearch(1)" class="form-width"
                    clearable v-model="formSearch.state" placeholder="选择上架状态">
                    <el-option label="上架" :value="1">
                    </el-option>
                    <el-option label="下架" :value="2">
                    </el-option>
                  </el-select>
                </el-form-item>
              </template>
            </template>
            <!-- 产品单位 -->
            <template v-if="activeName == 4">
              <el-form-item label="产品单位">
                <el-input @change="onSearch(1)" clearable class="form-width" v-model="formSearch.unit_name"
                  placeholder="输入产品单位"></el-input>
              </el-form-item>
            </template>
          </el-form>
        </div>
        <div class="search-top-right-box">
          <p @click="moreSearchFunc" v-if="activeName == 1 || activeName == 2">
            {{ moreSearchShow ? "收起" : "展开"
            }}<i :class="moreSearchShow ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
              "></i>
          </p>
          <el-button type="primary" @click="onSearch(1)">查询</el-button>
          <el-button v-if="activeName == 1 && $isPer(permission, ['productType_add'])" type="primary"
            @click="addProductFunc">新增产品规格</el-button>
          <el-button v-if="activeName == 2 && $isPer(permission, ['purchase_addProductName'])" type="primary"
            @click="addProductFunc">新增产品名称</el-button>
          <el-button v-if="activeName == 3 && $isPer(permission, ['purchase_addProductType'])" type="primary"
            @click="addProductFunc">新增产品大类</el-button>
          <el-button v-if="activeName == 4 && $isPer(permission, ['purchase_addProductUnit'])" type="primary"
            @click="addProductFunc">新增产品单位</el-button>
        </div>
      </div>
    </div>
    <!-- table -->
    <div class="page-list" ref="pageList" v-loading="pageLoading">
      <div class="list-top-box">
        <div class="tab-box">
          <el-tabs v-model="activeName" @tab-click="tabClickFunc">
            <el-tab-pane label="产品大类" name="3"></el-tab-pane>
            <el-tab-pane label="产品名称" name="2"></el-tab-pane>
            <el-tab-pane label="产品规格" name="1"></el-tab-pane>
            <el-tab-pane label="产品单位" name="4"></el-tab-pane>
          </el-tabs>
        </div>
        <div class="list-top-box-right">
          <p class="list-top-box-left">
            已选<span class="num">{{ multipleSelection.length }}</span>/{{ tableData.length }}数据
          </p>
          <el-button @click="editFunc" type="primary" :disabled="multipleSelection.length != 1"
            v-if="is_editFunc">编辑</el-button>
          <el-button @click="delFunc" type="danger" plain :disabled="multipleSelection.length == 0"
            v-if="is_delFunc">删除</el-button>
        </div>
      </div>
      <!-- 产品大类 -->
      <template v-if="activeName == 3">
        <div class="table-box">
          <el-table border ref="table" @row-click="handleHighlightChangeTable" highlight-selection-row
            :header-cell-style="{
              background: '#FAFBFC',
              color: '#828A9D',
              textAlign: 'center',
            }" :cell-style="{ textAlign: 'center', color: '#1B2431' }" :data="tableData"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="80"></el-table-column>
            <el-table-column width="100" label="序号">
              <template slot-scope="scope">
                {{ scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column min-width="140px" label="ID" prop="Id">
              <template slot-scope="scope">
                {{ $assemblyListNo('CPDL', scope.row.Id) }}
              </template>
            </el-table-column>
            <el-table-column v-if="$fieldShowFunc('cpxx_cpdl')" min-width="180px" prop="product_type_name" label="产品大类"
              show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.product_type_name || "--" }}
              </template>
            </el-table-column>
            <el-table-column v-if="$fieldShowFunc('cpxx_cpdlcjsj')" min-width="180px" prop="created_at" label="创建时间"
              show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.created_at || "--" }}
              </template>
            </el-table-column>
            <el-table-column v-if="$fieldShowFunc('cpxx_cpdlcjr')" min-width="180px" prop="name" label="创建人"
              show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.name || "--" }}
              </template>
            </el-table-column>
            <!-- <el-table-column prop="insurance_status" label="是否保险类" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.insurance_status == 1 ? '是' : '否' }}
              </template>
            </el-table-column> -->
            <el-table-column v-if="$fieldShowFunc('cpxx_cpdlsjxj')" min-width="180px" prop="state" label="上架/下架"
              show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{ scope.row.state == 1 ? '上架' : '下架' }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </template>
      <!-- 产品名称 -->
      <template v-if="activeName == 2">
        <div class="table-box">
          <el-table border ref="table" @row-click="handleHighlightChangeTable" highlight-selection-row
            :header-cell-style="{
              background: '#FAFBFC',
              color: '#828A9D',
              textAlign: 'center',
            }" :cell-style="{ textAlign: 'center', color: '#1B2431' }" :data="tableData"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="80"></el-table-column>
            <el-table-column width="100" label="序号">
              <template slot-scope="scope">
                {{ scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column min-width="140px" label="ID" prop="Id">
              <template slot-scope="scope">
                {{ $assemblyListNo('CPMC', scope.row.Id) }}
              </template>
            </el-table-column>
            <el-table-column v-if="$fieldShowFunc('cpxx_cpdl2')" min-width="180px" prop="product_type_name" label="产品大类"
              show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.product_type_name || "--" }}
              </template>
            </el-table-column>
            <el-table-column v-if="$fieldShowFunc('cpxx_cpmc')" min-width="180px" prop="product_name" label="产品名称"
              show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.product_name || "--" }}
              </template>
            </el-table-column>
            <el-table-column v-if="$fieldShowFunc('cpxx_cpmccjsj')" min-width="180px" prop="created_at" label="创建时间"
              show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.created_at || "--" }}
              </template>
            </el-table-column>
            <el-table-column v-if="$fieldShowFunc('cpxx_cpmccjr')" min-width="180px" prop="name" label="创建人"
              show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.name || "--" }}
              </template>
            </el-table-column>
            <el-table-column v-if="$fieldShowFunc('cpxx_cpmcsjxj')" min-width="180px" prop="state" label="上架/下架"
              show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.state == 1 ? '上架' : '下架' }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </template>
      <!-- 产品规格 -->
      <template v-if="activeName == 1">
        <div class="table-box">
          <el-table border ref="table" @row-click="handleHighlightChangeTable" highlight-selection-row
            :header-cell-style="{
              background: '#FAFBFC',
              color: '#828A9D',
              textAlign: 'center',
            }" :cell-style="{ textAlign: 'center', color: '#1B2431' }" :data="tableData"
            @selection-change="handleSelectionChange" height="100%">
            <el-table-column type="selection" width="80"></el-table-column>
            <el-table-column width="100" label="序号">
              <template slot-scope="scope">
                {{ scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column min-width="140px" label="ID" prop="Id">
              <template slot-scope="scope">
                {{ $assemblyListNo('CPGG', scope.row.Id) }}
              </template>
            </el-table-column>
            <el-table-column v-if="$fieldShowFunc('cpxx_cpdl3')" min-width="180px" prop="product_type_name" label="产品大类"
              show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.product_type_name || "--" }}
              </template>
            </el-table-column>
            <el-table-column v-if="$fieldShowFunc('cpxx_cpmc2')" min-width="180px" prop="product_name" label="产品名称"
              show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.product_name || "--" }}
              </template>
            </el-table-column>
            <el-table-column v-if="$fieldShowFunc('cpxx_cpgg')" min-width="180px" prop="product_specs_name" label="产品规格"
              show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.product_specs_name || "--" }}
              </template>
            </el-table-column>
            <el-table-column v-if="$fieldShowFunc('cpxx_cpcs')" min-width="180px" prop="product_describe" label="产品参数"
              show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.product_describe || "--" }}
              </template>
            </el-table-column>
            <el-table-column v-if="$fieldShowFunc('cpxx_cpggcjsj')" min-width="180px" prop="created_at" label="创建时间"
              show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.created_at || "--" }}
              </template>
            </el-table-column>
            <el-table-column v-if="$fieldShowFunc('cpxx_cpggcjr')" min-width="180px" prop="name" label="创建人"
              show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.name || "--" }}
              </template>
            </el-table-column>
            <el-table-column v-if="$fieldShowFunc('cpxx_cpggsjxj')" min-width="180px" prop="state" label="上架/下架"
              show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.state == 1 ? '上架' : '下架' }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </template>
      <!-- 产品单位 -->
      <template v-if="activeName == 4">
        <div class="table-box">
          <el-table border ref="table" @row-click="handleHighlightChangeTable" highlight-selection-row
            :header-cell-style="{
              background: '#FAFBFC',
              color: '#828A9D',
              textAlign: 'center',
            }" :cell-style="{ textAlign: 'center', color: '#1B2431' }" :data="tableData"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="80"></el-table-column>
            <el-table-column width="100" label="序号">
              <template slot-scope="scope">
                {{ scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column min-width="140px" label="ID" prop="Id">
              <template slot-scope="scope">
                {{ $assemblyListNo('CPDW', scope.row.Id) }}
              </template>
            </el-table-column>
            <el-table-column v-if="$fieldShowFunc('cpxx_cpdw')" min-width="180px" prop="product_unit_name" label="产品单位"
              show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.product_unit_name || "--" }}
              </template>
            </el-table-column>
            <el-table-column v-if="$fieldShowFunc('cpxx_cpdwcjsj')" min-width="180px" prop="created_at" label="创建时间"
              show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.created_at || "--" }}
              </template>
            </el-table-column>
            <el-table-column v-if="$fieldShowFunc('cpxx_cpdwcjr')" min-width="180px" prop="name" label="创建人"
              show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.name || "--" }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </template>
      <div class="page-footer">
        <el-pagination class="el-pagination" @current-change="handleCurrentChange" :current-page="page" :page-size="num"
          @size-change="handleSizeChange" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div>
    <!-- 新增产品类别 -->
    <el-dialog :modal-append-to-body="false" :before-close="cancelCategoryFunc" destroy-on-close
      :title="`${formInlineCategory.type_id ? '修改' : '新增'}产品大类`" :visible.sync="dialogVisibleCategory" width="490px">
      <el-form ref="ruleFormCategory" :rules="rulesCategory" :model="formInlineCategory" label-width="100px"
        label-position="left">
        <el-form-item label="产品大类" prop="product_type_name">
          <el-input clearable class="form-width2" v-model="formInlineCategory.product_type_name"
            placeholder="输入产品大类"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="state">
          <el-radio-group v-model="formInlineCategory.state">
            <el-radio :label="1">上架</el-radio>
            <el-radio :label="2">下架</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否保险类" prop="insurance_status">
          <el-checkbox @change="checkboxGroupChange" v-model="formInlineCategory.insurance_status"></el-checkbox>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitCategoryFunc" :loading="addLoading">提交</el-button>
        <el-button @click="cancelCategoryFunc">关闭</el-button>
      </span>
    </el-dialog>
    <!-- 新增产品名称 -->
    <el-dialog :modal-append-to-body="false" :before-close="cancelNameFunc" destroy-on-close
      :title="`${formInlineCategory.product_id ? '修改' : '新增'}产品名称`" :visible.sync="dialogVisibleName" width="490px">
      <el-form :rules="rulesCategory" ref="ruleFormName" :model="formInlineCategory" label-width="100px"
        label-position="left">
        <el-form-item label="产品名称" prop="product_name">
          <el-input clearable class="form-width2" v-model="formInlineCategory.product_name"
            placeholder="输入产品名称"></el-input>
        </el-form-item>
        <el-form-item label="产品大类" prop="type_id">
          <el-select filterable clearable v-model="formInlineCategory.type_id" placeholder="选择产品大类" class="form-width2">
            <el-option v-for="item in productTypeList" :key="item.Id" :label="item.product_type_name" :value="item.Id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="formInlineCategory.state">
            <el-radio :label="1">上架</el-radio>
            <el-radio :label="2">下架</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitNameFunc" :loading="addLoading">提交</el-button>
        <el-button @click="cancelNameFunc">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import adminApi from "@/api/adminApi";
import commonApi from "@/api/common";
import { getUserInfo } from "@/utils/auth";
import purchaseApi from "@/api/purchaseApi";
export default {
  name: "productMsgManagement",
  components: {},
  data() {
    return {
      activeName: "3",
      tableLoading: false,
      userInfo: "",
      tableData: [],
      formSearch: {
        // 产品规格
        product_name: "",
        product_type_id: "",
        product_specs_name: "",
        product_describe: "",
        user_id: "",
        state: "",
        // 产品名称
        product_name: "",
        product_type_id: "",
        dateVal: "",
        // 产品大类
        type_name: "",
        // 产品单位
        unit_name: ""
      },
      moreSearchShow: false,
      page: 1,
      num: 10,
      total: 0,
      addLoading: false,
      pageLoading: false,
      multipleSelection: [],
      dialogVisibleCategory: false,
      formInlineCategory: {
        // 添加产品大类
        product_type_name: "",
        insurance_status: false,
        state: 1,
        // 添加产品名称
        type_id: "",
        product_name: "",
        state: 1
      },
      rulesCategory: {
        product_type_name: [
          { required: true, message: '请输入产品大类名称', trigger: 'change' },
        ],
        type_id: [
          { required: true, message: '请选择产品大类', trigger: 'change' },
        ],
        product_name: [
          { required: true, message: '请输入产品名称', trigger: 'change' },
        ],
      },
      dialogVisibleName: false,
      productTypeList: [],
      adminOptions: [],
      permission: [],//操作权限
    };
  },
  watch: {},
  computed: {
    // 编辑按钮控制
    is_editFunc() {
      switch (Number(this.activeName)) {
        case 1:
          return this.$isPer(this.permission, ['purchase_updateProductSpecs']);
          break;
        case 2:
          return this.$isPer(this.permission, ['purchase_updateProductName']);
          break;
        case 3:
          return this.$isPer(this.permission, ['purchase_updateProductType']);
          break;
        case 4:
          return this.$isPer(this.permission, ['purchase_updateProductUnit']);
          break;
        default:
      }
    },
    // 删除按钮控制
    is_delFunc() {
      switch (Number(this.activeName)) {
        case 1:
          return this.$isPer(this.permission, ['purchase_deleteProductSpecs']);
          break;
        case 2:
          return this.$isPer(this.permission, ['purchase_deleteProductName']);
          break;
        case 3:
          return this.$isPer(this.permission, ['purchase_deleteProductType']);
          break;
        case 4:
          return this.$isPer(this.permission, ['purchase_deleteProductUnit']);
          break;
        default:
      }
    },
  },
  activated() {
    // 监听窗口大小变化事件
    window.addEventListener('resize', this.handleResize);
    this.onSearch();
  },
  destroyed() {
    window.removeEventListener('resize', this.handleResize);
    // 移除窗口大小变化事件监听器，防止内存泄漏
    if (this.resizeObserver) {
      // 停止观察目标元素，防止内存泄漏
      this.resizeObserver.disconnect();
    }
  },
  deactivated() {
    window.removeEventListener('resize', this.handleResize);
    // 移除窗口大小变化事件监听器，防止内存泄漏
    if (this.resizeObserver) {
      // 停止观察目标元素，防止内存泄漏
      this.resizeObserver.disconnect();
    }
  },
  mounted() {
    this.handleResize();
    // 监听窗口大小变化事件
    window.addEventListener('resize', this.handleResize);
    // 操作权限
    this.$getHtmlAuthority(this.$route.path).then(res => {
      console.log(res, "getHtmlAuthority");
      this.permission = res.data.permission;
    })
    this.userInfo = getUserInfo();
    // this.getProductSpecs();
    this.getProductType();
    this.getAdminList();
  },
  methods: {
    handleResize() {
      const target = this.$refs.targetElement;
      const searchBox = this.$refs.searchBox;
      const pageList = this.$refs.pageList;
      // 创建 ResizeObserver 实例
      const resizeObserver = new ResizeObserver(entries => {
        setTimeout(() => {
          console.log('元素变为:', searchBox.offsetHeight);
          // searchBox.offsetHeight + 'px'
          pageList.style.height = 'calc(100% - ' + (searchBox.offsetHeight + 15) + 'px)';
        }, 0);
      });
      // 开始观察目标元素
      resizeObserver.observe(target);

      // 存储 resizeObserver 实例，以便在组件销毁时停止观察
      this.resizeObserver = resizeObserver;
    },
    // 单页数据量修改
    handleSizeChange(e) {
      this.num = e;
      this.onSearch(1);
    },
    // 页面权限
    getHtmlAuthority() {
      commonApi
        .getHtmlAuthority({
          path: this.$route.path,
        })
        .then((res) => {
          console.log(res, "页面权限");
          if (res.code == 200) {
            this.HtmlAuthority = res.data;
          }
        });
    },
    // 搜索
    onSearch(page) {
      this.page = typeof page === 'number' ? page : this.page;
      switch (this.activeName) {
        case "1":
          this.getProductSpecs();
          break;
        case "2":
          // this.getProductType(9999);
          this.getProductName();
          break;
        case "3":
          this.getProductType();
          break;
        case "4":
          this.getProductUnit();
          break;
      }
    },
    // 翻页
    handleCurrentChange(page) {
      this.onSearch(page);
    },
    moreSearchFunc() {
      this.moreSearchShow = !this.moreSearchShow;
      this.$nextTick(() => {
        this.handleResize();
      })
    },
    handleSelectionChange(e) {
      console.log(e);
      this.multipleSelection = e;
    },
    addProductFunc() {
      let activeName = this.activeName;
      switch (activeName) {
        case "1":
          this.$store.commit('isEventTriggeredFunc', true);
          this.$router.push("/addProductType");
          break;
        case "2":
          this.dialogVisibleName = true;
          break;
        case "3":
          this.dialogVisibleCategory = true;
          break;
        case "4":
          this.$prompt("单位名称", "添加", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            inputPattern: /^.+$/,
            inputErrorMessage: "请输入单位",
          })
            .then(({ value }) => {
              this.addProductUnit(value)
            })
            .catch(() => { });
          break;
        default:
      }
    },
    // -----------------------------添加产品单位---------------------------------
    addProductUnit(unit_name) {
      purchaseApi.addProductUnit({ unit_name }).then(res => {
        console.log(res, "添加产品单位")
        if (res.code == 200) {
          this.onSearch(1);
        }
        this.$message({
          type: res.code == 200 ? 'success' : 'warning',
          message: res.message
        })
      })
    },
    checkboxGroupChange(e) {
      let formInlineCategory = this.formInlineCategory;
      formInlineCategory.insurance_status = e;
      this.formInlineCategory = formInlineCategory;
    },
    // -----------------------------tab点击---------------------------------
    tabClickFunc(e) {
      this.total = 0;
      this.page = 1;
      this.tableData = [];
      switch (this.activeName) {
        case "1":
          this.getProductSpecs();
          break;
        case "2":
          this.getProductName();
          this.getProductType(9999);
          break;
        case "3":
          this.getProductType();
          break;
        case "4":
          this.getProductUnit();
          break;
      }
      this.$nextTick(() => {
        this.handleResize();
      })
    },
    // ----------------------------产品规格列表--------------------------------------
    getProductSpecs() {
      let formSearch = this.formSearch;
      this.pageLoading = true;
      purchaseApi.getProductSpecs({
        product_name: formSearch.product_name,
        product_type_id: formSearch.product_type_id,
        product_specs_name: formSearch.product_specs_name,
        product_describe: formSearch.product_describe,
        start_time: formSearch.dateVal2 ? formSearch.dateVal2[0] : '',
        end_time: formSearch.dateVal2 ? formSearch.dateVal2[1] : '',
        user_id: formSearch.user_id,
        state: formSearch.state,
        page: this.page,
        num: this.num,
      }).then(res => {
        console.log(res, "产品规格列表")
        this.pageLoading = false;
        if (res.code == 200) {
          this.total = res.data.max;
          this.tableData = res.data.list;
        }
      })
    },
    // ----------------------------产品单位列表--------------------------------------
    getProductUnit() {
      let formSearch = this.formSearch;
      this.pageLoading = true;
      purchaseApi.getProductUnit({
        unit_name: formSearch.unit_name,
        page: this.page,
        num: this.num
      }).then(res => {
        console.log(res, "单位列表")
        this.pageLoading = false;
        if (res.code == 200) {
          this.total = res.data.max;
          this.tableData = res.data.list;
        }
      })
    },
    // ----------------------------产品大类列表--------------------------------------
    getProductType(num) {
      console.log(num, "条数")
      let formSearch = this.formSearch;
      this.pageLoading = true;
      purchaseApi.getProductType({
        page: this.page,
        num: num || this.num,
        type_name: formSearch.type_name,
        start_time: formSearch.dateVal ? formSearch.dateVal[0] : "",
        end_time: formSearch.dateVal ? formSearch.dateVal[1] : "",
        user_id: formSearch.user_id,
        state: formSearch.state,
        insurance_status: formSearch.insurance_status,
      }).then(res => {
        console.log(res, "产品大类列表")
        this.pageLoading = false;
        if (res.code == 200) {
          if (num) {
            this.productTypeList = res.data.list;
            return;
          }
          this.total = res.data.max;
          this.tableData = res.data.list;
        }
      })
    },
    // ----------------------------产品名称--------------------------------------
    getProductName() {
      let formSearch = this.formSearch;
      this.pageLoading = true;
      purchaseApi.getProductName({
        page: this.page,
        num: this.num,
        product_name: formSearch.product_name,
        product_type_id: formSearch.product_type_id,
        start_time: formSearch.dateVal ? formSearch.dateVal[0] : "",
        end_time: formSearch.dateVal ? formSearch.dateVal[1] : "",
        user_id: formSearch.user_id,
        state: formSearch.state,
      }).then(res => {
        console.log(res, "产品名称")
        this.pageLoading = false;
        if (res.code == 200) {
          this.total = res.data.max;
          this.tableData = res.data.list;
        }
      })
    },
    // -------------------------------添加产品大类------------------------------------
    cancelCategoryFunc() {
      this.formInlineCategory = {
        // 添加产品大类
        product_type_name: "",
        insurance_status: false,
        state: 1,
        // 添加产品名称
        type_id: "",
        product_name: "",
        state: 1
      }
      // this.$refs.ruleFormCategory.resetFields();
      this.$nextTick(() => {
        this.dialogVisibleCategory = false;
      })
    },
    submitCategoryFunc() {
      this.$refs.ruleFormCategory.validate((valid) => {
        if (valid) {
          if (this.formInlineCategory.type_id) {
            this.updateProductType({
              product_type_name: this.formInlineCategory.product_type_name,
              insurance_status: this.formInlineCategory.insurance_status ? 1 : 2,
              state: this.formInlineCategory.state,
              type_id: this.formInlineCategory.type_id,
            })
            return;
          }
          this.addProductType({
            product_type_name: this.formInlineCategory.product_type_name,
            insurance_status: this.formInlineCategory.insurance_status ? 1 : 2,
            state: this.formInlineCategory.state,
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // -------------------------------添加产品大类------------------------------------
    addProductType(obj) {
      this.addLoading = true;
      purchaseApi.addProductType(obj).then(res => {
        console.log(res, "添加产品大类")
        this.addLoading = false;
        if (res.code == 200) {
          this.onSearch(1);
          this.cancelCategoryFunc();
        }
        this.$message({
          type: res.code == 200 ? 'success' : 'warning',
          message: res.message
        })
      })
    },
    // -------------------------------更新产品大类------------------------------------
    updateProductType(obj) {
      this.addLoading = true;
      purchaseApi.updateProductType(obj).then(res => {
        console.log(res, "更新产品大类")
        this.addLoading = false;
        if (res.code == 200) {
          this.onSearch();
          this.cancelCategoryFunc();
        }
        this.$message({
          type: res.code == 200 ? 'success' : 'warning',
          message: res.message
        })
      })
    },
    // -------------------------------添加产品名称------------------------------------
    cancelNameFunc() {
      this.formInlineCategory = {
        // 添加产品大类
        product_type_name: "",
        insurance_status: false,
        state: 1,
        // 添加产品名称
        type_id: "",
        product_name: "",
        state: 1
      }
      // this.$refs.ruleFormName.resetFields();
      this.$nextTick(() => {
        this.dialogVisibleName = false;
      })
    },
    submitNameFunc() {
      this.$refs.ruleFormName.validate((valid) => {
        if (valid) {
          if (this.formInlineCategory.product_id) {
            this.updateProductName({
              type_id: this.formInlineCategory.type_id,
              product_name: this.formInlineCategory.product_name,
              state: this.formInlineCategory.state,
              product_id: this.formInlineCategory.product_id
            })
            return;
          }
          this.addProductName({
            type_id: this.formInlineCategory.type_id,
            product_name: this.formInlineCategory.product_name,
            state: this.formInlineCategory.state,
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // -------------------------------编辑添加产品名称请求------------------------------------
    addProductName(obj) {
      this.addLoading = true;
      purchaseApi.addProductName(obj).then(res => {
        console.log(res, "添加产品名称")
        this.addLoading = false;
        if (res.code == 200) {
          this.getProductType(9999);
          this.onSearch(1);
          this.cancelNameFunc();
        }
        this.$message({
          type: res.code == 200 ? 'success' : 'warning',
          message: res.message
        })
      })
    },
    // -------------------------------编辑产品名称请求------------------------------------
    updateProductName(obj) {
      this.addLoading = true;
      purchaseApi.updateProductName(obj).then(res => {
        console.log(res, "编辑产品名称")
        this.addLoading = false;
        if (res.code == 200) {
          this.onSearch();
          this.cancelNameFunc();
        }
        this.$message({
          type: res.code == 200 ? 'success' : 'warning',
          message: res.message
        })
      })
    },
    // -------------------------------企业人员------------------------------------
    getAdminList(keyword) {
      adminApi.getAdminList({
        identity: 1,
        page: 1,
        num: 999,
        keyword: keyword || ""
      }).then(res => {
        console.log(res, "企业人员")
        if (res.code == 200) {
          this.adminOptions = res.data.list;
        }
      })
    },
    filterMethodFunc(e) {
      this.getAdminList(e);
    },
    // -------------------------------编辑按钮------------------------------------
    editFunc() {
      let multipleSelection = this.multipleSelection;
      console.log(multipleSelection)
      switch (this.activeName) {
        case "1":
          this.$store.commit('isEventTriggeredFunc', true);
          this.$router.push({
            path: '/addProductType',
            query: {
              id: multipleSelection[0].Id,
              route_title: '编辑产品规格'
            }
          })
          break;
        case "2":
          this.getProductNameInfo(multipleSelection[0].Id);
          break;
        case "3":
          this.getProductTypeInfo(multipleSelection[0].Id);
          break;
        case "4":
          this.getProductUnitInfo(multipleSelection[0].Id);
          break;
      }
    },
    // -------------------------------产品单位详情------------------------------------
    getProductUnitInfo(unit_id) {
      purchaseApi.getProductUnitInfo({ unit_id }).then(res => {
        console.log(res, "产品单位详情")
        if (res.code == 200) {
          this.$prompt("单位名称", "修改", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            inputPattern: /^.+$/,
            inputErrorMessage: "请输入单位",
            inputValue: res.data.product_unit_name
          })
            .then(({ value }) => {
              this.updateProductUnit({
                unit_id: res.data.Id,
                unit_name: value
              })
            })
            .catch(() => { });
        }
      })
    },
    // -------------------------------更新产品单位------------------------------------
    updateProductUnit(obj) {
      purchaseApi.updateProductUnit(obj).then(res => {
        console.log(res, "更新产品单位")
        if (res.code == 200) {
          this.onSearch();
        }
        this.$message({
          type: res.code == 200 ? 'success' : 'warning',
          message: res.message
        })
      })
    },
    // -------------------------------删除按钮------------------------------------
    delFunc() {
      let multipleSelection = this.multipleSelection;
      console.log(multipleSelection)
      let delArr = [];
      multipleSelection.forEach(item => {
        delArr.push(item.Id);
      })
      switch (this.activeName) {
        case "1":
          this.$confirm('此操作将永久删除已勾选产品规格, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.deleteProductSpecs({
              delete_arr: delArr
            });
          }).catch(() => {
          });
          break;
        case "2":
          this.$confirm('此操作将永久删除已勾选产品名称, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.deleteProductName({
              delete_arr: delArr
            });
          }).catch(() => {
          });
          break;
        case "3":
          this.$confirm('此操作将永久删除已勾选产品大类, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.deleteProductType({
              delete_arr: delArr
            });
          }).catch(() => {
          });
          break;
        case "4":
          this.$confirm('此操作将永久删除已勾选产品单位, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.deleteProductUnit({
              delete_arr: delArr
            });
          }).catch(() => {
          });
          break;
      }
    },
    // -------------------------------删除产品单位请求------------------------------------
    deleteProductUnit(obj) {
      purchaseApi.deleteProductUnit(obj).then(res => {
        console.log(res, "删除产品单位")
        if (res.code == 200) {
          this.onSearch();
        }
        this.$message({
          type: res.code == 200 ? 'success' : 'warning',
          message: res.message
        })
      })
    },
    // -------------------------------删除产品大类请求------------------------------------
    deleteProductType(obj) {
      purchaseApi.deleteProductType(obj).then(res => {
        console.log(res, "删除产品大类")
        if (res.code == 200) {
          this.onSearch();
        }
        this.$message({
          type: res.code == 200 ? 'success' : 'warning',
          message: res.message
        })
      })
    },
    // -------------------------------删除产品名称请求------------------------------------
    deleteProductName(obj) {
      purchaseApi.deleteProductName(obj).then(res => {
        console.log(res, "删除产品名称")
        if (res.code == 200) {
          this.onSearch();
        }
        this.$message({
          type: res.code == 200 ? 'success' : 'warning',
          message: res.message
        })
      })
    },
    // -------------------------------删除规格请求------------------------------------
    deleteProductSpecs(obj) {
      purchaseApi.deleteProductSpecs(obj).then(res => {
        console.log(res, "删除规格")
        if (res.code == 200) {
          this.onSearch();
        }
        this.$message({
          type: res.code == 200 ? 'success' : 'warning',
          message: res.message
        })
      })
    },
    // -------------------------------产品名称详情------------------------------------
    getProductNameInfo(product_id) {
      purchaseApi.getProductNameInfo({ product_id }).then(res => {
        console.log(res, "产品名称详情")
        if (res.code == 200) {
          this.formInlineCategory.type_id = res.data.product_type_id;
          this.formInlineCategory.product_name = res.data.product_name;
          this.formInlineCategory.state = res.data.state;
          this.formInlineCategory.product_id = res.data.Id;
          this.$nextTick(() => {
            this.dialogVisibleName = true;
          })
        }
      })
    },
    // ----------------------------table点击行-选中----------------------------
    handleHighlightChangeTable(row) {
      if (!row.disabled) {
        this.$refs.table.toggleRowSelection(row);
      }
    },
    // -------------------------------产品大类详情------------------------------------
    getProductTypeInfo(type_id) {
      purchaseApi.getProductTypeInfo({ type_id }).then(res => {
        console.log(res, "产品大类详情")
        if (res.code == 200) {
          this.formInlineCategory = {
            // 添加产品大类
            product_type_name: res.data.product_type_name,
            insurance_status: res.data.insurance_status == 1,
            state: res.data.state,
            type_id: res.data.Id
          }
          this.dialogVisibleCategory = true;
        }
      })
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
@import '@/styles/listPage.scss';
</style>